<script setup lang="ts">
import { ref } from "vue";
import Form from '../src/components/form/Form.vue'

const model = ref({ username: "", password: "" });

const rules = {
  username: [
    { required: true, message: "请输入用户名", trigger: "blur" },
    { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
  ],
  password: [
    { required: true, message: "请输入密码", trigger: "blur" },
    { min: 6, message: "长度至少为 6 个字符", trigger: "blur" },
  ],
};

const formRef = ref<InstanceType<typeof Form> | null>(null);

const handleClick = () => {
  formRef.value?.validate((valid) => {
    if (valid) {
      console.log("submit!");
    } else {
      console.log("error submit!");
      return false;
    }
  });
};
</script>

<template>
  <div>
    <ElForm :model="model" :rules="rules" ref="formRef">
      <ElFormItem label="用户名" prop="username">
        <ElInput v-model="model.username" />
      </ElFormItem>
      <ElFormItem label="密码" prop="password">
        <ElInput v-model="model.password" />
      </ElFormItem>

      <button @click="handleClick">点击</button>
    </ElForm>
  </div>
</template>

<style scoped></style>
